<template>
    <div class="bg-gradient-to-br from-gray-600 to-black p-4">
      <div>
        <el-tag type="primary">{{ ext }}</el-tag>
  
        <el-tag class="ml-2 text-black" type="success">{{ formattedDate(fileObj.LastModified) }}</el-tag>
        <el-tag class="ml-2" type="danger">{{ formatBytes(fileObj.Size) }}</el-tag>
        <el-link class="ml-4" type="success">{{ fileObj.url }}</el-link>
      </div>
      <div class="mt-6">
       
        <div v-if="ext === 'Word'">
          <iframe :src="`http://119.45.240.39:4145/onlinePreview?url=${encodeURIComponent(base64Encode(fileObj.url))}`" style="width: 100%; height: 100vh" />
        </div>
        <div v-else-if="ext === 'Excel'">
          <iframe :src="`http://119.45.240.39:4145/onlinePreview?url=${encodeURIComponent(base64Encode(fileObj.url))}`" style="width: 100%; height: 100vh" />
        </div>
        <div v-else-if="ext === 'PDF'">
          <iframe :src="`http://119.45.240.39:4145/onlinePreview?url=${encodeURIComponent(base64Encode(fileObj.url))}`" style="width: 100%; height: 100vh" />
        </div>
        <div v-else-if="ext === 'PowerPoint'">
          <iframe :src="`http://119.45.240.39:4145/onlinePreview?url=${encodeURIComponent(base64Encode(fileObj.url))}`" style="width: 100%; height: 100vh" />
        </div>
        <div v-if="ext === '图片' || ext === 'SVG'">
          <img :src="fileObj.url" style="max-height: 60vh; margin: 0 auto" />
        </div>
        <div v-else-if="ext === '视频'">
          <video :src="fileObj.url" controls style="height: auto; margin: 0 auto" />
        </div>
        <div v-else-if="ext === '音频'">
          <audio :src="fileObj.url" controls style="height: 50px; margin: 0 auto" />
        </div>
        <div class="text-left" v-else-if="ext === 'JavaScript' || ext === 'HTML' || ext === 'CSS' || ext === 'JSON'">
          <!-- 使用代码高亮组件来展示文件内容 -->
  
          <highlightjs autodetect :code="fileObj.content" />
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  // 安装
  // #docx文档预览组件
  // npm install @vue-office/docx vue-demi@0.14.6
  
  // #excel文档预览组件
  // npm install @vue-office/excel vue-demi@0.14.6
  
  // #pdf文档预览组件
  // npm install @vue-office/excel vue-demi@0.14.6
  // 如果是vue2.6版本或以下还需要额外安装 @vue/composition-api
  
  // npm install @vue/composition-api
  
  import { ref, reactive, toRefs, onMounted, computed, getCurrentInstance } from 'vue';
  
  const instance = getCurrentInstance();
  
  const props = defineProps({
    fileObj: Object, // Define qweather as an object prop
    ext: String,
  });
  function formatBytes(bytes) {
    if (bytes === 0) {
      return '0 Bytes';
    }
  
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
  
    const i = Math.floor(Math.log(bytes) / Math.log(k));
  
    return `${parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
  }
  function formattedDate(LastModified) {
    return instance.appContext.config.globalProperties.$moment(LastModified).format('YYYY-MM-DD');
  }
  function base64Encode(str) {
  // 将字符串转换为二进制数据
  const binaryData = unescape(encodeURIComponent(str));
  // 使用btoa函数进行Base64编码
  return btoa(binaryData);
}
  </script>
  <style scoped lang="less"></style>
  